<template>
  <div class="publish_form">
    <el-form :model="dataForm" ref="dataForm" label-width="80px" >
      <el-form-item label="请选择信息类型：" prop="type" label-width="11%">
        <el-radio-group v-model="dataForm.type">
          <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
        </el-radio-group>
        <el-button class="publish_btn" v-if="isAuth('business:info:save')" type="primary" @click="getContent (),dataFormSubmit ()">发布{{dataForm.typeList[dataForm.type]}}</el-button>
      </el-form-item>
      <el-form-item label="标题" prop="headline" label-width="4%">
        <el-input
          v-model="dataForm.headline"
          :placeholder="'请输入100字符内的' + dataForm.typeList[dataForm.type] + '标题'"
          size="100">
        </el-input>
      </el-form-item>

      <el-form-item label="封面图片">
        <el-upload
          :action=url
          :limit="1"
          list-type="picture-card"
          :on-success="successHandler"
          :auto-upload="true">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 406px;">
      当前可输入10000个字符
      </script>
    </el-form>

  </div>
</template>

<script>
  import ueditor from 'ueditor'
  export default {
    data () {
      return {
        url: this.$http.adornUrl(`/business/file/upload?token=${this.$cookie.get('token')}`),
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        dataForm: {
          type: 1,
          typeList: ['热点文章', '话题', '公告'],
          headline: '',
          cover: '',
          formData: new FormData
        },
        ue: null,
        ueId: `J_ueditorBox_${new Date().getTime()}`,
        ueContent: '',
        dialogVisible: false
      }
    },
    mounted () {
      //实例化UE编辑器
      this.ue = ueditor.getEditor(this.ueId, {
        // serverUrl: '', // 服务器统一请求接口路径
        zIndex: 3000
      })
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      // 上传成功
      successHandler (response, file, fileList) {
        this.dataForm.cover = response.attachEntity
      },
      getContent () {
        this.ue.ready(() => {
          this.ueContent = this.ue.getContent()
        })
      },
      //表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/business/info/save`),
              method: 'post',
              data: this.$http.adornData({
                'infoId': this.dataForm.id || undefined,
                'infoType': this.dataForm.type,
                'headline': this.dataForm.headline,
                'content': this.ueContent,
                'cover': this.dataForm.cover
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .publish_form {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
  .publish_btn {
    float: right;
  }
  .wran {
    color: #ef0a0a;
    position: relative;
    font-size: 12px;
    margin-top: 9%;
  }
</style>
